<template>
    <a-layout-sider style="background: #fff;">
        <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" :items="items"
            @click="handleClick"></a-menu>
    </a-layout-sider>
</template>
<script setup>
import { reactive, ref, watch, h } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined, HomeOutlined, FolderOutlined, UserOutlined, FieldTimeOutlined, HistoryOutlined, MoneyCollectOutlined, StarOutlined, PlusOutlined, VideoCameraOutlined, FireOutlined, SoundOutlined, CameraOutlined, PlayCircleOutlined, FileOutlined, CustomerServiceOutlined, MehOutlined } from '@ant-design/icons-vue';
const selectedKeys = ref([location.pathname]);
const openKeys = ref([location.pathname]);
function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
const items = reactive([
    getItem('推荐', '/', h(HomeOutlined)),
    // getItem('动态', '/dynamic', h(UserOutlined)),
    // {
    //     type: 'divider',
    // },
    //getItem('稍后再看', '/wait', h(FieldTimeOutlined)),
    //getItem('历史记录', '/history', h(HistoryOutlined)),
    getItem('收藏视频', '/collect', h(StarOutlined)),
    getItem('创作中心', '/creative', h(PlusOutlined)),
    {
        type: 'divider',
    },
    getItem('热门', '/hot', h(FireOutlined)),
    getItem('直播', '/live', h(VideoCameraOutlined)),
    getItem('音乐', '/music', h(CustomerServiceOutlined)),
    getItem('影视', '/camera', h(CameraOutlined)),
    getItem('游戏', '/game', h(MehOutlined)),
    getItem('新闻', '/news', h(FileOutlined)),
]);


import { useRouter } from 'vue-router';
const router = useRouter();
const handleClick = e => {
    router.push(e.key)
};





</script>

<style scoped>
    .ant-layout {
        overflow-y: auto;
        .ant-menu {
            border-inline-end: none;
        }
    }
</style>